<template>
  <div>
    <a-modal
      :title="title"
      :width="1200"
      :height="800"
      :visible="visible"
      :footer="null"
      @cancel="cancel"
      cancelText="关闭"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 800px"
    >
      <span slot="closeIcon">
          <a-icon type="close-circle"/>
      </span>
      <div>
        <!--      <a-row :gutter="10">
                <a-col :md="20" :sm="32">-->
        <img :src="imgObj1" ref="showImages1" v-show="images1" style="margin-left:1px"/>
        <img :src="imgObj2" ref="showImages2" v-show="images2" style="margin-left:1px"/>
      </div>
      <!--   </a-col>

         <a-col :md="12" :sm="32">
 -->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="userId"
          :columns="columns"
          :dataSource="FlowDetails"
        >
            <span slot="nodeName" slot-scope="text,record">
                 {{record.nodeName}}
            </span>
          <span slot=" theStartTime" slot-scope="text,record">
          {{record.theStartTime}}
          </span>
          <span slot="theEndTime" slot-scope="text,record">
                 {{record.theEndTime}}
            </span>
          <span slot="theDateDiff" slot-scope="text,record" :class="{'active':isActive}">
                 {{record.theDateDiff}}
            </span>
          <span slot="relStartTime" slot-scope="text,record">
                 {{record.relStartTime}}
            </span>
          <span slot="relEndTime" slot-scope="text,record">
                 {{record.relEndTime}}
            </span>
          <span slot="relDateDiff" slot-scope="text,record" :class="{'active':isActive}">
                 {{record.relDateDiff}}
            </span>
          <span slot="description" slot-scope="text,record">
                 {{record.description}}
            </span>
          <span slot="attachmentsName" slot-scope="text,record">
                 <a :href="record.attachments" download="abc">{{record.attachmentsName}}</a>
            </span>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import {
    getProcImage,
    loadDescription,
    loadUser,
    loadStart,
    loadEnd,
    getFileTypes,
    getFlowDetails
  } from '@/api/activiti'
  import {JantdListMixin} from '@/mixins/JantdListMixin'
  import moment from 'moment'

  const statusText = ['草稿', '处理中', '结束', '废弃']
  export default {
    name: "FlowShowVisible2",
    mixins: [JantdListMixin],
    data() {

      return {
        taskFileTypes: [],
        FlowDetails: [],
        isActive: false,
        columns: [
          {
            title: '节点位置',
            align: 'center',
            dataIndex: 'nodeName',
            scopedSlots: {customRender: 'nodeName'}
          },
          {
            title: '计划执行开始时间',
            align: 'center',
            dataIndex: 'theStartTime',
            scopedSlots: {customRender: 'theStartTime'}
          },
          {
            title: '计划执行结束时间',
            align: 'center',
            dataIndex: 'theEndTime',
            scopedSlots: {customRender: 'theEndTime'}
          },
          {
            title: '计划执行天数',
            align: 'center',
            dataIndex: 'theDateDiff',
            scopedSlots: {customRender: 'theDateDiff'}
          },
          {
            title: '实际开始时间',
            align: 'center',
            dataIndex: 'relStartTime',
            scopedSlots: {customRender: 'relStartTime'}
          },
          {
            title: '实际结束时间',
            align: 'center',
            dataIndex: 'relEndTime',
            scopedSlots: {customRender: 'relEndTime'}
          },
          {
            title: '实际执行天数',
            align: 'center',
            dataIndex: 'relDateDiff',
            scopedSlots: {customRender: 'relDateDiff'}
          },
          {
            title: '节点描述',
            align: 'center',
            dataIndex: 'description',
            scopedSlots: {customRender: 'description'}
          },
          {
            title: '附件',
            dataIndex: 'attachmentsName',
            align: 'center',
            scopedSlots: {customRender: 'attachmentsName'}
          }
        ],
        // url: {
        //   list: '/act/task/allTasks'
        // },
        title: '流程进度全部展示图',
        visible: false,
        imgObj1: "",
        imgObj2: "",
        images1: false,
        images2: false,
        size: 'default',
        description: '',
        userId: '',
        userName: '',
        startTime: '',
        endTime: '',
        processInstanceId: '',
        modelId: ''
      }

    },
    methods: {
      moment,
      show2(record) {
        this.modelId = record.modelId;
        this.initProcImage(record)
        // this.initDescription(record.processInstanceId)
        // this.initUser(record.processInstanceId)
        // this.initStart(record.processInstanceId)
        // this.initEnd(record.processInstanceId)
        // this.getFileTypes()
        //TODO
        this.getFlowDetails(record)

      },
      initProcImage(record) {
        let that = this
        let countNum = 0;
        const processInstanceId = record.processInstanceId
        getProcImage(processInstanceId).then(function (json) {
          const result = json.images
          that.visible = true
          that.$nextTick(() => {
            const imgObj1 = that.$refs.showImages1
            const imgObj2 = that.$refs.showImages2
            imgObj1.src = "data:image/png;base64," + result[0]
            imgObj2.src = "data:image/png;base64," + result[1]
          })

          window.setInterval(function () {
            if (countNum == 0) {
              that.images1 = true
              that.images2 = false
            } else {
              that.images1 = false
              that.images2 = true
            }
            countNum++;
            if (countNum == 2) {
              countNum = 0;//回到了原点
            }
          }, 1000)
        }).catch(function (err) {
          console.log(err)
        })
      },
      //获取节点描述
      initDescription(processInstanceId) {
        let vm = this
        loadDescription(processInstanceId).then(res => {
            vm.description = res.result
            console.log("dsd:" + vm.description)
          }
        )
      },
      //获取当前位置人员
      initUser(processInstanceId) {
        let vm = this
        loadUser(processInstanceId).then(res => {
            vm.userName = res.result
            console.log("dsd:" + vm.userName)
          }
        )
      },
      //获取开始时间
      initStart(processInstanceId) {
        let vm = this
        loadStart(processInstanceId).then(res => {
            vm.startTime = res.result
            console.log("dsd:" + vm.startTime)
          }
        )
      },
      //获取结束时间
      initEnd(processInstanceId) {
        let vm = this
        loadEnd(processInstanceId).then(res => {
            vm.endTime = res.result
            console.log("dsd:" + vm.endTime)
          }
        )
      },
      //获取全部信息
      getFlowDetails() {
        let that = this
        getFlowDetails(this.modelId).then(res => {
          console.log(res.result);
          let resultSet = res.result.map(item => {
            if (item.theEndTime != null && item.theStartTime != null) {
              let theDateDiff = that.moment(item.theEndTime).diff(item.theStartTime, "days");
              item.theDateDiff = theDateDiff;
            }
            if (item.relEndTime != null && item.relStartTime != null) {
              let relDateDiff = that.moment(item.relEndTime).diff(item.relStartTime, "days");
              item.relDateDiff = relDateDiff;
            }
            if (item.relDateDiff != undefined && item.theDateDiff != undefined) {
              if (item.relDateDiff > item.theDateDiff) {
                that.isActive = true
              }
            }else {
              that.isActive = false
            }
            return item;
          })
          console.log(resultSet)
          that.FlowDetails = resultSet


          // let sysUsers = res.result.sysUsers.map(item=>{
          //   item["userId"] = item.id;
          //   delete item.id;
          //   return item;
          // });
          //
          // let arrTmp = this.arrayHandler(res.result.identitylinkUsers,sysUsers,"userId");
          // this.taskFileTypes = this.arrayHandler(res.result.taskFileTypes,arrTmp,"activityId");
          // console.log(this.taskFileTypes)
        })
      },
      arrayHandler(arr1, arr2, key) {
        let arrTmp = arr1.concat(arr2);
        let arr = [];
        let temp = {};
        arrTmp.forEach(item => {
          if (temp[item[key]]) {
            arr.push({
              ...temp[item[key]],
              ...item
            })
          } else {
            temp[item[key]] = Object.assign({}, item);
          }
        })
        return arr;
      },
      cancel() {
        this.visible = false
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .active {
    color: red;
  }

  .a {
    line-height: 10px;
  }
</style>